
<div class="init-width">
    <transition name="moves">
        <div v-show="showFlag" class="add-group add-info operate-way" :class="{'operate-bg': operateCurrent == 1}">
            <div class="title-info">
                <h4 class="app-title">
                    <span @click="hide"><i class="icon-left back"></i></span>
                    {{group.name}}</h4>
                <i @click="showOperate" class="icon-more right-top"></i>
            </div>
            <div class="content-info flex-wrapper no-padding-bottom group-wrapper" :class="{'operate-way-info': operateCurrent == 1}"  :id="lightId">
                <div v-show="operateCurrent == 0" id="light-group-wrapper" class="light-wrapper">
                    <div class="selected-radio flex flex-ac flex-jcb">
                        <div>{{$t('selectDevice')}}({{selected}}/{{total}})</div>
                        <div @click="selectAllDevice($event)"  class="select-small-radio flex flex-ac flex-jce">
                            <span id="color-selected-id" class="span-radio"
                                  :class="{'active': (selected == total && selected != 0)}"><span></span></span></div>
                    </div>
                    <div class="overflow-touch">
                        <div  @click="selectMac(item.iotId)" v-for="item in colorList" class="item">
                            <div class="item-icon-circle">
                                <i class="icon icon-light" :style="{'color': getGroupColor(item.characteristics)}"></i>
                            </div>
                            <div class="item-name">
                                <span >{{item.deviceName}}</span>
                                <span class="desc">{{item.version}}</span>
                            </div>
                            <div class="item-power-small">
                            <span :data-value="item.iotId"
                                  class="span-radio" :class="{'active': isSelected(item.iotId)}"><span></span></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-show="operateCurrent == 1" id="color-group-wrapper" class="color-wrapper">
                    <v-color :colorId="colorId" :temperatureId="temperatureId"
                             :macs="groupMacs" :isRoom="false" v-on:colorShow="hide" :colorType="operateType" ref="color"></v-color>
                </div>
                <div v-show="operateCurrent == 2" id="scene-group-wrapper" class="scene-wrapper">
                    <ul class="scene-info">
                        <li v-for="item in sceneList" @click="setScene(item.h, item.s, item.b)">
                            <i :class="item.icon" :style="{background: getColor(item.h, item.s, item.b)}"></i>
                            <span>{{item.name}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <footer class="footer-info">
                <ul>
                    <li id="light-wrapper-li" @click="operate(0)" :class="{'active': operateCurrent == 0}">
                        <i class="icon-light"></i>
                        <span>{{$t('nav.device')}}</span>
                    </li>
                    <li v-show="!showSet" @click="operate(1)" :class="{'active': operateCurrent == 1}">
                        <i class="icon-contrast"></i>
                        <span>{{$t('color')}}</span>
                    </li>
<!--                    <li v-show="!showSet" @click="operate(2)" :class="{'active': operateCurrent == 2}">-->
<!--                        <i class="icon-disc"></i>-->
<!--                        <span>{{$t('scene')}}</span>-->
<!--                    </li>-->
                </ul>
            </footer>
        </div>
    </transition>
    <transition name="ups">
        <div v-show="infoShow" class="operate-wrapper">
            <div @click="hideOperate" class="mask"></div>
            <div class="operate-info">
                <ul>
                    <li class="name">
                        <span class="title"><i class="icon-groups"></i>{{group.name}}</span>
                        <div class="desc">
                            <div class="switch-wrapper">
                                <span  :class="{'active': !getStatusByGroup(group.iotIds)}"
                                       @click="close(0)">OFF</span>
                                <span  :class="{'active': getStatusByGroup(group.iotIds)}"
                                       @click="close(1)">ON</span>
                            </div>
                        </div>
                    </li>
                    <li @click="editName"><span>{{$t('editName')}}</span></li>
                    <li @click="delGroup"><span class="icon-orange">删除群组</span></li>
                    <li @click="unbindDevices"><span class="icon-orange">设备解绑</span></li>
                    <li @click="groupInfo"><span>{{$t('editGroup')}}</span></li>
                    <li @click="hideOperate" class="margin-top-15 no-border"><span>{{$t('cancelBtn')}}</span></li>
                </ul>
            </div>
        </div>
    </transition>
    <v-groupInfo v-on:groupInfoShow="onBackGroupColor" :editDeviceId="editColorId" :group="group" v-if="group" ref="info"></v-groupInfo>
    <v-otaInfo v-on:otaShow="onBackGroupColor" :otaId="otaGroupColorId" :macs="otaMacs" v-if="group" ref="ota"></v-otaInfo>
    <v-joinMesh v-on:meshShow="onBackGroupColor" :joinMeshSlider="joinSliderColor" :joinMeshId="joinMeshColor"
                :group="group" v-if="group" ref="mesh"></v-joinMesh>
    <v-command v-on:commandShow="onBackGroupColor" :commandMacs="commandColorMacs" ref="command"></v-command>
</div>